<template>
  <div id="assetPool">
    <!-- <div class="filterQuery">
      <div class="tiao">
        <span class="label">资产状态：</span>
        <el-radio-group v-model="radio" size="small">
          <el-radio-button label="待入池"></el-radio-button>
          <el-radio-button label="保存"></el-radio-button>
          <el-radio-button label="审核中"></el-radio-button>
          <el-radio-button label="打回修改"></el-radio-button>
          <el-radio-button label="审核通过"></el-radio-button>
          <el-radio-button label="无效"></el-radio-button>
        </el-radio-group>
      </div>
    </div>-->
    <div class="chuchi" style="margin-top: 10px;">
      <button @click="btnClick">资产出池</button>
      <button @click="zcth">替换资产</button>
    </div>
    <div class="tipmessage">
      <span>资产池规模：¥{{zichan.total}}</span>
      <span>本周内预计到期：{{countDown[0].count}}笔</span>
      <span>半月内预计到期：{{countDown[1].count}}笔</span>
      <span>本月内预计到期：{{countDown[2].count}}笔</span>
    </div>
    <div class="table">
      <el-table
        ref="multipleTable"
        :data="tableData"
        border
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
        :row-class-name="tableRowClassName"
      >
        <el-table-column type="selection" width="55" align="center"></el-table-column>
        <el-table-column prop="receiveId" align="center" label="序号"></el-table-column>
        <el-table-column prop="sellCompany" align="center" label="债权人（卖方）"></el-table-column>
        <el-table-column prop="buyCompany" align="center" label="债务人（买方）"></el-table-column>
        <el-table-column prop="contractName" align="center" label="基础交易合同"></el-table-column>
        <el-table-column prop="receiveAmount" align="center" label="应收款金额"></el-table-column>
        <el-table-column prop="endDate" align="center" label="应收款到期日" :formatter="this.dateTable"></el-table-column>
      </el-table>
      <div class="block">
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-size="10"
          layout="total, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
    </div>
    <!-- -------------------------- -->
    <el-dialog :visible.sync="dialogVisible" title="可替换资产池列表" center width="1250px">
      <el-table
        :data="diatableData"
        border
        style="width: 100%"
        @selection-change="handleSelectionChange1"
      >
        <el-table-column prop="receiveAmount" label="应收款金额" width="180" align="center"></el-table-column>
        <el-table-column prop="buyCompany" label="债务人（买方）" width="180" align="center"></el-table-column>
        <el-table-column prop="endDate" label="应收款到期日" align="center"></el-table-column>
        <el-table-column prop="sellCompany" label="债权人（卖方）" align="center"></el-table-column>
        <el-table-column prop="contractName" label="基础交易合同" align="center"></el-table-column>
        <el-table-column type="selection" width="55" label="选择"></el-table-column>
      </el-table>
      <div class="diabtn">
        <el-button type="primary" size="small" @click="diasubmit">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "assetPool",
  data() {
    return {
      dialogVisible: false,
      radio: "",
      tableData: [],
      multipleSelection: [],
      currentPage: 1,
      total: null,
      zichan: {},
      countDown: [
        {
          count: 0,
          STATE: "WEEK"
        },
        {
          count: 0,
          STATE: "HALF_MONTH"
        },
        {
          count: 0,
          STATE: "MONTH"
        }
      ],
      diatableData: [],
      multipleSelection1: []
    };
  },
  created() {
    this.getdata(1);
  },
  methods: {
    diasubmit () {
      if (this.multipleSelection1.length == 0) {
        this.$message({ message: "请勾选替换列表", type: "warning" });
        return false;
      }
      let outList = [];
      let inList = [];
      this.multipleSelection.forEach((item, index)=> {
        outList.push(item.receiveId); 
      })
      this.multipleSelection1.forEach((item, index)=> {
        inList.push(item.receiveId); 
      })
      this.axios.post('AdminAPI/assetManage/replacePoolAsset',{outList,inList})
        .then(({data})=> {
          if (data.code == 200) {
            this.$message({ message: "替换成功", type: "success" });
            this.dialogVisible = false;
            this.multipleSelection = [];
            this.multipleSelection1 = [];
          }
        })
    },
    zcth() {
      if (this.multipleSelection.length == 0) {
        this.$message({ message: "请先选择入池资产列表", type: "warning" });
        return false;
      }
      this.dialogVisible = true;
      this.getAssetList();
    },
    // 查看可替换资产池列表
    getAssetList() {
      this.axios
        .get("AdminAPI/assetManage/getAssetListForReplace", {
          params: { projectId: sessionStorage.getItem("swdypId") }
        })
        .then(({ data }) => {
          this.diatableData = data.data;
        });
    },
    // 颜色
    tableRowClassName({ row, rowIndex }) {
      if (row.STATE == "WEEK") {
        return "weekcolor";
      } else if (row.STATE == "HALF_MONTH") {
        return "halfcolor";
      } else if (row.STATE == "MONTH") {
        return "monthcolor";
      }
      return "";
    },
    // 资产出池
    btnClick() {
      if (this.multipleSelection.length == 0) {
        this.$message({ message: "请选择列表", type: "warning" });
        return false;
      }
      let arrid = [];
      this.multipleSelection.forEach((ele, index) => {
        arrid.push(String(ele.receiveId));
      });
      this.axios
        .post("AdminAPI/assetManage/outPoolAsset", { outList: arrid })
        .then(({ data }) => {
          if (data.code == 200) {
            this.$message({ message: "提交成功", type: "success" });
          }
        });
    },
    getdata(val) {
      this.currentPage = val;
      let obj = {
        projectId: sessionStorage.getItem("swdypId"),
        page: this.currentPage
      };
      this.axios
        .get("AdminAPI/assetManage/getAssetPoolList", {
          params: this.filterNoneObj(obj)
        })
        .then(({ data }) => {
          this.tableData = data.data.list;
          this.countDown = data.data.countDown;
          this.zichan = data.data.total;
          this.total = data.pageInfo.total;
        });
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleSelectionChange1(val) {
      this.multipleSelection1 = val;
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getdata(val);
    }
  }
};
</script>

<style lang="scss">
#assetPool {
  .el-table .weekcolor {
    background: #e2eefd;
  }
  .el-table .halfcolor {
    background: #c3ecf5;
  }
  .el-table .monthcolor {
    background: #defae0;
  }
  .filterQuery {
    margin-top: 10px;
    background: #e2eefd;
    padding-left: 34px;
    position: relative;
    .tiao {
      padding: 10px 0;
      .label {
        font-size: 20px;
        vertical-align: middle;
        color: #333333;
      }
      .el-radio-button__inner {
        border: none;
        padding: 6px 15px;
        background: none;
        font-size: 18px;
        border-radius: 0;
        margin-right: 15px;
      }
      .el-radio-button {
        &.is-active {
          span {
            background-color: #409eff !important;
          }
        }
      }
    }
  }
  .chuchi {
    background: white;
    padding: 47px 0 0 58px;
    button {
      width: 132px;
      height: 40px;
      background: #5ab1f3;
      border-radius: 6px;
      font-size: 22px;
      font-weight: 400;
      color: rgba(255, 255, 255, 1);
      cursor: pointer;
      &:first-child {
        background: #012b98;
        margin-right: 58px;
      }
    }
  }
  .tipmessage {
    display: flex;
    background: white;
    justify-content: center;
    align-items: center;
    padding: 30px 0;
    span {
      padding: 20px 38px;
      background: rgba(251, 110, 84, 1);
      border-radius: 6px;
      margin-right: 2px;
      font-size: 20px;
      &:first-child {
        color: white;
      }
      &:nth-of-type(2) {
        background: #e2eefd;
      }
      &:nth-of-type(3) {
        background: #c3ecf5;
      }
      &:nth-of-type(4) {
        background: #defae0;
      }
    }
  }
  .table {
    background: white;
    padding-top: 16px;
    .has-gutter tr th {
      background: #fefaf1;
    }
    .block {
      text-align: right;
      margin-right: 55px;
      height: 50px;
      margin-top: 20px;
    }
  }
  .has-gutter tr th {
    background: #fefaf1;
  }
  .diabtn {
    text-align: center;
    margin: 20px;
  }
}
</style>
